<template>
    <div class="subject">
        <span>{{ ANumber }}</span>
        <span>+</span>
        <span>{{ BNumber }}</span>
        <span>=</span>
        <input type="number" v-model.number="answer" />
        <button @click="submit()">提交</button>
    </div>
</template>

<script>
export default {
    name: "SubjectItem",
    props: {
        index: Number
    },
    data() {
        return {
            ANumber: 0,
            BNumber: 0,
            answer: null,
            result: false
        };
    },
    created() {
        this.getNumber()
    },
    methods: {
        getNumber() {
            this.ANumber = Math.floor(Math.random() * 11);
            this.BNumber = Math.floor(Math.random() * 11);
        },
        submit() {
            this.$emit("submit", {
                index: this.index,
                isRight: this.answer === this.ANumber + this.BNumber,
            });
        }
    }
};
</script>

<style scoped>
.subject {
    margin: 5px;
    padding: 5px;
    font-size: 20px;
}

.subject span {
    display: inline-block;
    text-align: center;
    width: 20px;
}

.subject input {
    width: 50px;
    height: 20px;
}
</style>